<template>
	<view>
		<unio2o-banner v-if="banner.length > 0" :banner="banner"></unio2o-banner>
		<view class="unio2o-list-tab">
			<view class="unio2o-list-tab-main bg-w unio2o-list-tab-h">
				<view class="unio2o-list-tab-h flex space alcenter">
					<view @click="showActPl" class="flex center alcenter col3"
						:class="showDiv == 1 ? 'text-theme on' : 'text-main'">
						<view class="ft16">分类</view>
						<view class="scale6 ml10">
							<view class="sjx iconfont icon_arrowdown1"></view>
						</view>
					</view>
					<view @click="showActFj" class="flex center alcenter col3"
						:class="showDiv == 2 ? 'text-theme on' : 'text-main'">
						<view class="ft16">附近</view>
						<view class="scale6 ml10">
							<view class="sjx iconfont icon_arrowdown1"></view>
						</view>
					</view>
					<view @click="showActPx" class="flex center alcenter col3"
						:class="showDiv == 3 ? 'text-theme on' : 'text-main'">
						<view class="ft16">智能排序</view>
						<view class="scale6 ml10">
							<view class="sjx iconfont icon_arrowdown1"></view>
						</view>
					</view>
				</view>
				<view v-if="showDiv > 0" class="unio2o-list-tab-alert">
					<view class="alert-cat bg-w pd30">
						<view v-for="(item, index) in cats" :key="index">
							<view class="line mt40 mb40" v-if="index > 0"></view>
							<view class="flex alcenter space">
								<view class="ft16">
									<text class="text-main ftw600">{{ item.name }}</text>
									<text class="text-notice ml10">({{ item.count || 0 }})</text>
								</view>
								<view class="iconfont icon_selected text-theme"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="pd30 bg-w">
			<!-- 使用动态数据 -->
			<template v-if="datas && datas.length > 0">
				<view v-for="(item, index) in datas" :key="item.id || index" class="mb50">
					<unio2o-tuan-list :item="item"></unio2o-tuan-list>
				</view>
				<!-- 每三个商品后显示一个广告 -->
				<unio2o-tuan-ad v-if="datas.length >= 3" :ad-list="getAdDataByIndex([2,3,4])"></unio2o-tuan-ad>
			</template>

			<!-- 如果没有数据，显示默认商品列表 -->
			<template v-else>
				<view class="mb50" v-for="index in 5" :key="index">
					<unio2o-tuan-list :item="datas"></unio2o-tuan-list>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import unio2oBanner from '@/components/base/banner/banner.vue';
import unio2oTuanList from '@/components/module/tuan/list.vue';
import unio2oTuanAd from '@/components/module/tuan/ad.vue';
export default {
	components: {
		unio2oBanner, unio2oTuanList, unio2oTuanAd
	},
	props: {

		index: {
			type: Number,
			default: 0
		},
		cats: {
			type: Array,
			default: function () {
				return [];
			}
		},
		datas: {
			type: Array,
			default: function () {
				return [];
			}
		},
		banner: {
			type: Array,
			default: function () {
				// 提供默认的banner数据，避免空白显示
				return [];
			}
		}
	},

	data() {
		return {
			showDiv: 0,
		}
	},
	methods: {
		showActPl() {
			uni.navigateTo({
				url: '/pages/tuan/today'
			})
		},
		showActFj() {
			uni.navigateTo({
				url: '/pages/toutiao/index'
			})
		},
		showActPx() {
			uni.navigateTo({
				url: '/pages/distribution/products'
			})
		},
		getAdDataByIndex(indexs) {
			// 根据分类索引返回不同的广告数据
			const adDataList = [
				// 美食餐饮广告
				{
					title: '豪华海鲜自助晚餐券',
					price: 268,
					originalPrice: 398,
					discount: '6.7',
					distance: '3.2km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/foodad1/300/300.jpg',
						'https://picsum.photos/seed/foodad2/300/300.jpg',
						'https://picsum.photos/seed/foodad3/300/300.jpg'
					]
				},
				// 酒店住宿广告
				{
					title: '五星级酒店周末特价房',
					price: 688,
					originalPrice: 1288,
					discount: '5.3',
					distance: '5.8km',
					type: 'multiple',
					images: [
						'https://picsum.photos/seed/hotelad1/300/300.jpg',
						'https://picsum.photos/seed/hotelad2/300/300.jpg',
						'https://picsum.photos/seed/hotelad3/300/300.jpg'
					]
				},
				// 休闲娱乐广告
				{
					title: '主题乐园一票畅玩',
					price: 198,
					originalPrice: 298,
					discount: '6.6',
					distance: '8.5km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/entad1/300/300.jpg',
						'https://picsum.photos/seed/entad2/300/300.jpg',
						'https://picsum.photos/seed/entad3/300/300.jpg'
					]
				},
				// 生活服务广告
				{
					title: '全屋深度保洁套餐',
					price: 299,
					originalPrice: 499,
					discount: '6.0',
					distance: '2.3km',
					type: 'multiple',
					images: [
						'https://picsum.photos/seed/servicead1/300/300.jpg',
						'https://picsum.photos/seed/servicead2/300/300.jpg',
						'https://picsum.photos/seed/servicead3/300/300.jpg'
					]
				},
				// 教育培训广告
				{
					title: '少儿英语启蒙课程',
					price: 999,
					originalPrice: 1599,
					discount: '6.2',
					distance: '4.1km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/eduad1/300/300.jpg',
						'https://picsum.photos/seed/eduad2/300/300.jpg',
						'https://picsum.photos/seed/eduad3/300/300.jpg'
					]
				},
				// 美容美发广告
				{
					title: '高级美容SPA护理',
					price: 398,
					originalPrice: 698,
					discount: '5.7',
					distance: '1.8km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/beautyad1/300/300.jpg',
						'https://picsum.photos/seed/beautyad2/300/300.jpg',
						'https://picsum.photos/seed/beautyad3/300/300.jpg'
					]
				},
				// 运动健身广告
				{
					title: '健身年卡超值优惠',
					price: 1999,
					originalPrice: 3688,
					discount: '5.4',
					distance: '2.7km',
					type: 'single',
					images: [
						'https://picsum.photos/seed/fitnessad1/300/300.jpg',
						'https://picsum.photos/seed/fitnessad2/300/300.jpg',
						'https://picsum.photos/seed/fitnessad3/300/300.jpg'
					]
				}
			];
			// 根据index返回对应的广告数据，如果超出范围则返回第一个
			let res = [];
			for (let i in indexs) {
				res.push(adDataList[indexs[i]]);
			}
			return res;
		}
	}
}
</script>

<style>
.unio2o-list-tab-h {
	height: 120rpx;
}

.unio2o-list-tab {
	height: 122rpx;
	border-bottom: 2rpx solid #E6E6E6;
}

.fixed {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 10;
}

.unio2o-list-tab-main {
	position: relative;
	z-index: 10;
}

.sjx {
	display: inline-block;
	transition: all .3s;
}

.unio2o-list-tab .on .sjx {
	transform: rotate(180deg);
}

.unio2o-list-tab-alert {
	position: absolute;
	left: 0;
	top: 122rpx;
	width: 100%;
	height: calc(100vh - 122rpx);
	background: rgba(0, 0, 0, .3);
}

.unio2o-list-tab-alert .alert-cat {
	max-height: 800rpx;
	overflow-y: scroll;
	width: 100%;
}

.unio2o-list-tab-alert .alert-cat .line {
	height: 2rpx;
	width: 100%;
	background: #E6E6E6;
}
</style>